class Enlarge {
    constructor(el) {
        this.el = document.querySelector(el)
        // 获取图片
        this.imgObj = this.el.querySelector('.img')
        // 获取遮罩图
        this.maskObj = this.el.querySelector('.mask')
        // 获取右侧大图
        this.enlargeObj = this.el.querySelector('.enlarge')
        // 启动插件
        this.overOut()
        this.maskMove()
        this.tbEnlarge()
    }

    overOut() {
        this.imgObj.onmouseover = () => {
            // 移入 ->  遮罩框   放大镜
            this.maskObj.style.display = this.enlargeObj.style.display = 'block'
        }
        this.imgObj.onmouseout = () => {
            // 移出 ->  遮罩框   放大镜
            this.maskObj.style.display = this.enlargeObj.style.display = 'none'
        }
    }

    maskMove() {
        // 遮罩层移动
        this.imgObj.onmousemove = (evt) => {
            // 获取事件对象
            let e = evt || window.Event
            // 同步mask的left,top
            let left = e.pageX - this.imgObj.offsetLeft - this.maskObj.offsetWidth / 2
            let top = e.pageY - this.imgObj.offsetTop - this.maskObj.offsetHeight / 2
            if (left < 0) left = 0
            if (top < 0) top = 0
            this.maskObj.style.left = left + 'px'
            this.maskObj.style.top = top + 'px'
            // 同步
            this.tbEnlarge(left, top)
        }
    }
    tbEnlarge(left, top) {
        // 同步enlarge背景图的left,top *2
        this.enlargeObj.style.backgroundPosition = `-${left*2}px -${top*2}px`
    }



}

let enlarge1 = new Enlarge('.enlarge1')
let enlarge2 = new Enlarge('.enlarge2')